<?php
    $this->layout('base.phtml', [
        'title' => _('Profile'),
        'canonical' => url_full('edit profile'),
        'current_page' => 'profile',
        'has_errors' => $error || $errors,
        'modal_enabled' => true,
    ]);
?>

<div class="section section--small">
    <div class="section__title">
        <h1><?= _('Profile') ?></h1>
    </div>

    <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>

    <form
        method="post"
        action="<?= url('update avatar') ?>"
        class="form-avatar"
        data-controller="autosubmit form-file"
        enctype="multipart/form-data"
    >
        <input type="hidden" name="csrf" value="<?= csrf_token() ?>" />
        <input type="hidden" name="from" value="<?= $from ?>" />

        <img class="avatar avatar--banner" src="<?= url_avatar($current_user->avatar_filename) ?>" alt="" />

        <input
            type="file"
            name="avatar"
            id="avatar"
            class="form-avatar__input"
            accept="image/png, image/jpeg"
            data-action="autosubmit#submit"
            data-form-file-target="file"
            hidden
        />

        <div class="form__actions">
            <button
                type="button"
                class="button--small"
                data-action="form-file#openFile"
                data-autosubmit-target="actionButton"
                aria-describedby="avatar-desc"
            >
                <?= _('Upload a photo') ?>
            </button>
        </div>

        <div id="avatar-desc">
            <?php if (isset($errors['avatar'])): ?>
                <p class="form-group__error">
                    <span class="sr-only"><?= _('Error') ?></span>
                    <?= $errors['avatar'] ?>
                </p>
            <?php endif; ?>

            <p class="form-group__caption text--centered">
                <?= _('<abbr>PNG</abbr> or <abbr>JPG</abbr> images only, a 150x150 image is recommended.') ?>
            </p>
        </div>
    </form>

    <form method="post" action="<?= url('update profile') ?>">
        <input type="hidden" name="csrf" value="<?= csrf_token() ?>" />
        <input type="hidden" name="from" value="<?= $from ?>" />

        <div class="form-group <?= isset($errors['username']) ? 'form-group--invalid' : '' ?>">
            <label for="username">
                <?= _('Your name') ?>
                <span class="label__help">
                    <?= _f('(public, max. %d characters)', 50) ?>
                </span>
            </label>

            <input
                type="text"
                name="username"
                id="username"
                value="<?= $username ?>"
                maxlength="50"
                required
                aria-describedby="username-desc"
            />

            <div id="username-desc">
                <?php if (isset($errors['username'])): ?>
                    <p class="form-group__error">
                        <span class="sr-only"><?= _('Error') ?></span>
                        <?= $errors['username'] ?>
                    </p>
                <?php endif; ?>
            </div>
        </div>

        <div class="form__actions">
            <button type="submit" class="button--primary">
                <?= _('Save changes') ?>
            </button>
        </div>
    </form>
</div>
